<template>
  <div id="app">
    <el-tabs type="border-card" tab-position="left" class="mytabs">
      <el-tab-pane label="个人信息">
        <el-form label-width="80px" class="myform">
          <el-form-item label="头像">
            <el-upload
              class="avatar-uploader"
              action="https://member.565tech.com/admin/upload/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="user.avatar" :src="user.avatar" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="user.username"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="user.phone" readonly></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="user.email"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确认修改</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="修改密码">
        <el-form ref="form" :model="form" label-width="80px" class="myform">
          <el-form-item label="原密码" prop="passwd" :rules="{required: true, message: '请输入旧密码'}">
            <el-input type="password" v-model="form.passwd"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="passwd2" :rules="{required: true, message: '请输入新密码'}">
            <el-input type="password" v-model="form.passwd2"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="passwd3" :rules="{required: true, message: '请确认密码'}">
            <el-input type="password" v-model="form.passwd3"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmitPasswd">确认修改</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import API from "../../utils/Api";
let Base64 = require("js-base64").Base64;
export default {
  data() {
    return {
      user: {
        username: "",
        email: "",
        phone: "",
        avatar: ""
      },
      form: {
        passwd: "",
        passwd2: "",
        passwd3: ""
      }
    };
  },
  mounted() {
    var user = JSON.parse(Base64.decode(window.sessionStorage.uc));
    this.user.username = user.username;
    this.user.phone = user.phone;
    this.user.email = user.email;
    this.user.avatar = user.avatar;
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.user.avatar = res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    onSubmit() {
      console.log(this.user);
      API.auth.userEdit(this.user, res => {
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: "更新成功"
          });
          window.sessionStorage.uc = Base64.encode(JSON.stringify(res.data));
          this.$router.back(-1);
        } else {
          this.$message({
            type: "error",
            message: res.msg
          });
        }
      });
    },
    onSubmitPasswd() {
      let self = this;
      if (self.form.passwd2 != self.form.passwd3) {
        this.$message({
          type: "error",
          message: "两次密码不一致"
        });
        return false
      }else if(self.form.passwd2.length < 8){
        this.$message({
          type: "error",
          message: "密码至少8位"
        });
        return false
      }
      this.$refs["form"].validate(d => {
        if (d) {
          API.auth.changePwd(self.form, res => {
            if (res.code === 200) {
              self.$message({
                type: "success",
                message: "修改成功，请重新登陆"
              });
              window.sessionStorage.clear();
              self.$router.push("/login");
            } else {
              self.$message({
                type: "error",
                message: res.msg
              });
            }
          });
        } else {
          self.$message({
            type: "warning",
            message: "请输入必要信息"
          });
        }
      });
    },
    cancel() {
      this.$router.back(-1);
    }
  }
};
</script>
<style scoped>
#app {
  padding: 0px;
}

.mytabs {
  width: 100%;
  margin-top: -1px;
  height: cale(100% - 1px);
}

.myform {
  width: 80%;
}

.avatar-uploader {
  width: 178px;
  height: 178px;
  border: 1px dashed #333;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>